<template>
  <section class="article-detail">
    <div class="poster" :style="'background-image: url('+ article.cover +')'" v-if="article.cover && article.cover.length"></div>
    <div class="title">{{article.title}}</div>
    <div class="info">
      <i class="iconfont icon-shijian"></i>
      <p>{{article.createTime | FDateTime('YYYY-MM-DD')}}</p>
      <i class="iconfont icon-biaoqian"></i>
      <p v-for="(item, index) in article.tag" :key="index">
        <a :href="'/tag/' + item">{{item}}</a>
      </p>
      <!-- 查看与点赞 -->
      <i class="iconfont icon-chakan"></i>
      <p>{{article.look}}</p>
    </div>
    <detail :markdown="article.content"/>
  </section>
</template>

<script>
import Detail from '@/components/detail.vue'
import moment from 'moment'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8083/api'

export default {
  async asyncData ({query}) {
    const articleData = await axios.get('/article/web/detail', {
      params: {
        id: query.id
      }
    })
    return {
      article: articleData.data
    }
  },
  components: {
    Detail
  },
  head () {
    return {
      title: this.article.title,
      meta: [
        { hid: 'description', name: 'description', content: this.article.desc }
      ]
    }
  }
}
</script>


<style lang="scss">
  .article-detail {
    .poster {
      padding-top: 32%;
      background: no-repeat center / cover;
      margin: 0 -30px;
    }
    .title{
      font-size: 30px;
      text-align: center;
      font-weight: bold;
      padding: 40px 0;
    }
    .info {
      display: flex;
      align-content: center;
      color: #999;
      i {
        font-size: 13px;
        display: inline-block;
        margin-top: 2px;
      }
      P {
        margin: 0 10px 0 5px;
        font-size: 13px;
      }
      a {
        color: #999;
        text-decoration: underline;
      }
    }
  }
</style>
